<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard Layout</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: #2a3b4c;
            color: #fff;
        }

        .dashboard {
            display: grid;
            grid-template-columns: 2fr 3fr 2fr;
            /* grid-template-rows: repeat(3, 1fr); */
            gap: 10px;
            padding: 20px;
        }

        .dashboard-header div:last-child {
            font-size: 16px;
            align-self: flex-end;
        }

        .dashboard-header {
            height: 80px;
            color: #fff;
            font-size: 34px;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0px 10px;
        }

        .sales-trend {
            background: #33475b;
            padding: 5px;
            border-radius: 8px;
        }

        h2 {
            font-size: 18px;
            margin-bottom: 10px;
        }

        .chart {
            background: #2a3b4c;
            height: 200px;
            border-radius: 8px;
        }

        .left {
            display: flex;
            flex-direction: column;           
        }

        .left div {
            margin-bottom: 10px;
        }

        .left .chart {
            height: 250px;
        }

        .center .chart {
            display: flex;
            flex-direction: column;
            height: 575px;
        }
        .center .chart .top{
            flex: 1.5;
        }
        .center .chart .bottom{
            flex: 1;
        }
    </style>
</head>

<body>
    <div class="dashboard-header">
        <div><img src="http://8.138.119.204:8081/static/img/logo1.png" alt=""></div>
        <div>电商平台实时监控系统</div>
        <div>2024-12-21 17:59:20</div>
    </div>
    <div class="dashboard">
        <div class="left">
            <div class="sales-trend">
                <h2>地区销量趋势</h2>
                <div class="chart">图表占位符</div>
            </div>
            <div class="sales-trend">
                <h2>地区销量趋势</h2>
                <div class="chart">图表占位符</div>
            </div>
        </div>

        <div class="center">
            <div class="sales-trend">
                <h2>商户分布与销售排行</h2>
                <div class="chart">
                    <div class="top" id="toplist">
                        图表占位符
                    </div>
                    <div class="bottom btn1">
                        图表占位符
                    </div>
                </div>
              
            </div>
        </div>
        <div class="left">
            <div class="sales-trend">
                <h2>热销商品销售金额占比统计</h2>
                <div class="chart">图表占位符</div>
            </div>
            <div class="sales-trend">
                <h2>库存销售量</h2>
                <div class="chart">图表占位符</div>
            </div>
        </div>
       
    </div>
  
    <script src="./echarts.min.js"></script>
    <script src="./axios.js"></script>
    <script src="./china.js"></script>

    <script src="./模板.js"></script>
    <script>


// 获取所有的chart元素进行实例化

const chartElements = document.querySelectorAll('.chart');
// console.log(chartElements);

 const myCharts0 = echarts.init(chartElements[0],'dark') 
 const myCharts1 = echarts.init(chartElements[1],'dark') 
 const myCharts3 = echarts.init(chartElements[3],'dark') 
 const myCharts4 = echarts.init(chartElements[4],'dark') 

const bottom =document.querySelector('.bottom')

//1.折线图渲染
//1.1获取数据函数
async function getData1() {
  let res =await  axios({
        url:'http://8.138.119.204:8182/api/trend?type=map'
      })
      console.log('得到的数据1',res.data);
     return res.data.data

    }

// 1.2折线图渲染主要部分
async function render1() {
 let data =await getData1()

 console.log('ggg',data);
 
 let series = data.series 
 let title = data.title
 let xAxis = data.xAxis
//  let dataList = data.

//  指定图表的配置项和数据
// *****主要修改部分如下*****
option = {
  color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
  title: {
    // left:'5%',
    // text: title
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    // 不要{}？？！！
    data: series.map(i=>i.name),
    top:18
    // color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data:[xAxis[0],'',xAxis[2],'',xAxis[4],'',xAxis[6],'',xAxis[8],'',xAxis[10],'',]
    }
  ],
  yAxis: [
    {
      type: 'value',
      max:1200
    }
  ],
  series: [
    {
      name: series[0].name,
      type: 'line',
      stack: 'Total',
      // smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //   {
        //     offset: 0,
        //     color: 'rgb(128, 255, 165)'
        //   },
        //   {
        //     offset: 1,
        //     color: 'rgb(1, 191, 236)'
        //   }
        // ])
      },
      emphasis: {
        focus: 'series'
      },
      data: series[0].data
    },
    {
      name: series[1].name,
      type: 'line',
      stack: 'Total',
    //   smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //   {
        //     offset: 0,
        //     color: 'rgb(0, 221, 255)'
        //   },
        //   {
        //     offset: 1,
        //     color: 'rgb(77, 119, 255)'
        //   }
        // ])
      },
      emphasis: {
        focus: 'series'
      },
      data: series[1].data
    },
    {
      name: series[2].name,
      type: 'line',
      stack: 'Total',
    //   smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //   {
        //     offset: 0,
        //     color: 'rgb(55, 162, 255)'
        //   },
        //   {
        //     offset: 1,
        //     color: 'rgb(116, 21, 219)'
        //   }
        // ])
      },
      emphasis: {
        focus: 'series'
      },
      data:series[2].data,
    },
    {
      name: series[3].name,
      type: 'line',
      stack: 'Total',
    //   smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //   {
        //     offset: 0,
        //     color: 'rgb(255, 0, 135)'
        //   },
        //   {
        //     offset: 1,
        //     color: 'rgb(135, 0, 157)'
        //   }
        // ])
      },
      emphasis: {
        focus: 'series'
      },
      data: series[3].data,
    },
    {
      name: series[4].name,
      type: 'line',
      stack: 'Total',
    //   smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {
        opacity: 0.8,
        // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //   {
        //     offset: 0,
        //     color: 'rgb(255, 191, 0)'
        //   },
        //   {
        //     offset: 1,
        //     color: 'rgb(224, 62, 76)'
        //   }
        // ])
      },
      emphasis: {
        focus: 'series'
      },
      data: series[4].data,
    }
  ]
};

// 使用刚指定的配置项和数据显示图表。
 
  myCharts0.setOption(option)
}
//1.3刚开始进入渲染一次，调用函数
render1()
// 1.4每隔5秒，获取一次新数据
setInterval(function () {
    render1()
},5000)


// 2.柱状图渲染
// 2.1获取数据
async function getData2() {
  let res =await  axios({
        url: 'http://8.138.119.204:8182/api/seller'
      })
      console.log('得到的数据2',res.data);
     return res.data.data
    }

// getData2()
// 判断销量最多的5个商家

async   function getTopFiveMaxValueBusinesses() {
    // 使用数组的排序方法按照value值降序排序
    const arr =await  getData2() 
    const sortedArr  = arr.sort((a, b) => b.value - a.value);
    // 取前5个元素，构建包含商家名和对应value值的新数组
    const topFive = sortedArr.slice(0,5).map(item => ({
        name: item.name,
        value: item.value
    }));
    console.log('111',topFive);
    
    return topFive;
}

// 2.2柱状图渲染
async function render2() {
    // 获取数据
    let data =await getTopFiveMaxValueBusinesses()
   
    // 配置参数
    option = {
  title: {
    // text: '商家销售量统计'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
//   legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    max:250,
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: data.map(i=>i.name)
  },
  series: [
    {
      label: {
        show: true,
        position: 'right'
      },
    //   name: '2012',
      type: 'bar',
      data:  data.map(i=>i.value)
    }
  ]
};

// 2.3使用刚指定的配置项和数据显示图表。
    myCharts1.setOption(option)
}
// 2.4 调用函数
render2()


// 3.中国地图 
 // 3.指定图表的配置项和数据
    // 主要修改部分如下
   const top1 = document.querySelector('#toplist')
   const topd = echarts.init(top1,'dark') 

    var mapName = 'china'
    var data = [
      { name: "北京", value: 199 },
      { name: "天津", value: 42 },
      { name: "河北", value: 102 },
      { name: "山西", value: 81 },
      { name: "内蒙古", value: 47 },
      { name: "辽宁", value: 67 },
      { name: "吉林", value: 82 },
      { name: "黑龙江", value: 123 },
      { name: "上海", value: 24 },
      { name: "江苏", value: 92 },
      { name: "浙江", value: 114 },
      { name: "安徽", value: 109 },
      { name: "福建", value: 116 },
      { name: "江西", value: 91 },
      { name: "山东", value: 119 },
      { name: "河南", value: 137 },
      { name: "湖北", value: 116 },
      { name: "湖南", value: 114 },
      { name: "重庆", value: 91 },
      { name: "四川", value: 125 },
      { name: "贵州", value: 62 },
      { name: "云南", value: 83 },
      { name: "西藏", value: 9 },
      { name: "陕西", value: 80 },
      { name: "甘肃", value: 56 },
      { name: "青海", value: 10 },
      { name: "宁夏", value: 18 },
      { name: "新疆", value: 180 },
      { name: "广东", value: 123 },
      { name: "广西", value: 59 },
      { name: "海南", value: 14 },
    ];

    var geoCoordMap = {};
    var toolTipData = [
      { name: "北京", value: [{ name: "科技人才总数", value: 95 }, { name: "理科", value: 82 }] },
      { name: "天津", value: [{ name: "文科", value: 22 }, { name: "理科", value: 20 }] },
      { name: "河北", value: [{ name: "文科", value: 60 }, { name: "理科", value: 42 }] },
      { name: "山西", value: [{ name: "文科", value: 40 }, { name: "理科", value: 41 }] },
      { name: "内蒙古", value: [{ name: "文科", value: 23 }, { name: "理科", value: 24 }] },
      { name: "辽宁", value: [{ name: "文科", value: 39 }, { name: "理科", value: 28 }] },
      { name: "吉林", value: [{ name: "文科", value: 41 }, { name: "理科", value: 41 }] },
      { name: "黑龙江", value: [{ name: "文科", value: 35 }, { name: "理科", value: 31 }] },
      { name: "上海", value: [{ name: "文科", value: 12 }, { name: "理科", value: 12 }] },
      { name: "江苏", value: [{ name: "文科", value: 47 }, { name: "理科", value: 45 }] },
      { name: "浙江", value: [{ name: "文科", value: 57 }, { name: "理科", value: 57 }] },
      { name: "安徽", value: [{ name: "文科", value: 57 }, { name: "理科", value: 52 }] },
      { name: "福建", value: [{ name: "文科", value: 59 }, { name: "理科", value: 57 }] },
      { name: "江西", value: [{ name: "文科", value: 49 }, { name: "理科", value: 42 }] },
      { name: "山东", value: [{ name: "文科", value: 67 }, { name: "理科", value: 52 }] },
      { name: "河南", value: [{ name: "文科", value: 69 }, { name: "理科", value: 68 }] },
      { name: "湖北", value: [{ name: "文科", value: 60 }, { name: "理科", value: 56 }] },
      { name: "湖南", value: [{ name: "文科", value: 62 }, { name: "理科", value: 52 }] },
      { name: "重庆", value: [{ name: "文科", value: 47 }, { name: "理科", value: 44 }] },
      { name: "四川", value: [{ name: "文科", value: 65 }, { name: "理科", value: 60 }] },
      { name: "贵州", value: [{ name: "文科", value: 32 }, { name: "理科", value: 30 }] },
      { name: "云南", value: [{ name: "文科", value: 42 }, { name: "理科", value: 41 }] },
      { name: "西藏", value: [{ name: "文科", value: 5 }, { name: "理科", value: 4 }] },
      { name: "陕西", value: [{ name: "文科", value: 38 }, { name: "理科", value: 42 }] },
      { name: "甘肃", value: [{ name: "文科", value: 28 }, { name: "理科", value: 28 }] },
      { name: "青海", value: [{ name: "文科", value: 5 }, { name: "理科", value: 5 }] },
      { name: "宁夏", value: [{ name: "文科", value: 10 }, { name: "理科", value: 8 }] },
      { name: "新疆", value: [{ name: "文科", value: 36 }, { name: "理科", value: 31 }] },
      { name: "广东", value: [{ name: "文科", value: 63 }, { name: "理科", value: 60 }] },
      { name: "广西", value: [{ name: "文科", value: 29 }, { name: "理科", value: 30 }] },
      { name: "海南", value: [{ name: "文科", value: 8 }, { name: "理科", value: 6 }] },
    ];

    /*获取地图数据*/
    topd.showLoading();
    var mapFeatures = echarts.getMap(mapName).geoJson.features;
    topd.hideLoading();
    mapFeatures.forEach(function (v) {
      // 地区名称
      var name = v.properties.name;
      // 地区经纬度
      geoCoordMap[name] = v.properties.cp;
    });

    var max = 480,
      min = 9; // todo
    var maxSize4Pin = 100,
      minSize4Pin = 20;

    var convertData = function (data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value),
          });
        }
      }
      return res;
    };
    option = {
      tooltip: {
        padding: 0,
        enterable: true,
        transitionDuration: 1,
        textStyle: {
          color: '#000',
          decoration: 'none',
        },
        // position: function (point, params, dom, rect, size) {
        //   return [point[0], point[1]];
        // },
        formatter: function (params) {
          var tipHtml = '';
          var currentToolTipData = toolTipData.find(item => item.name === params.name);
          if (currentToolTipData) {
            tipHtml = '<div style="width:280px;height:180px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7)">'
              + '<div style="width:100%;height:40px;line-height:40px;border-bottom:2px solid rgba(7,166,255,0.7);padding:0 20px">' + '<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;border-radius:40px;">' + '</i>'
              + '<span style="margin-left:10px;color:#fff;font-size:16px;">' + params.name + '</span>' + '</div>'
              + '<div style="padding:20px">'
              + '<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' + '</i>'
              + '科技人才总数：' + '<span style="color:#11ee7d;margin:0 6px;">' + (currentToolTipData.value.find(item => item.name === '科技人才总数')?.value || 0) + '</span>' + '个' + '</p>'
              + '<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' + '</i>'
              + '文科人数：' + '<span style="color:#f48225;margin:0 6px;">' + (currentToolTipData.value.find(item => item.name === '文科')?.value || 0) + '</span>' + '个' + '</p>'
              + '<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' + '</i>'
              + '理科人数：' + '<span style="color:#f4e925;margin:0 6px;">' + (currentToolTipData.value.find(item => item.name === '理科')?.value || 0) + '</span>' + '个' + '</p>'
              + '</div>' + '</div>';
          }
          return tipHtml;
        }

      },

      visualMap: {
        show: true,
        min: 0,
        max: 200,
        left: '10%',
        top: 'bottom',
        calculable: true,
        seriesIndex: [1],
        inRange: {
          color: ['#04387b', '#467bc0'] // 蓝绿
        }
      },
      geo: {
        show: true,
        map: mapName,
        label: {
          normal: {
            show: false
          },
          emphasis: {
            show: false,
          }
        },
        roam: false,
        itemStyle: {
          normal: {
            areaColor: '#023677',
            borderColor: '#1180c7',
          },
          emphasis: {
            areaColor: '#4499d0',
          }
        }
      },
      series: [
         

      // 注释看区别
        // {
        //   name: '散点',
        //   type: 'scatter',
        //   coordinateSystem: 'geo',
        //   data: convertData(data),
        //   symbolSize: function (val) {
        //     return val[2] / 10;
        //   },
        //   label: {
        //     normal: {
        //       formatter: '{b}',
        //       position: 'right',
        //       show: true
        //     },
        //     emphasis: {
        //       show: true
        //     }
        //   },
        //   itemStyle: {
        //     normal: {
        //       color: '#fff'
        //     }
        //   }
        // },
        
        {
          type: 'map',
          map: mapName,
          geoIndex: 0,
          aspectScale: 0.75, //长宽比
          showLegendSymbol: false, // 存在legend时显示
          label: {
            normal: {
              show: true
            },
            emphasis: {
              show: false,
              textStyle: {
                color: '#fff'
              }
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: '#031525',
              borderColor: '#3B5077',
            },
            emphasis: {
              areaColor: '#2B91B7'
            }
          },
          animation: false,
          data: data
        },
        {
          name: '点',
          type: 'scatter',
          coordinateSystem: 'geo',
          zlevel: 6,
          data: convertData(data)
        },
        {
          name: 'Top 5',
          type: 'effectScatter',
          coordinateSystem: 'geo',
          data: convertData(data.sort(function (a, b) {
            return b.value - a.value;
          }).slice(0, 10)),
          symbolSize: function (val) {
            return val[2] / 10;
          },
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke'
          },
          hoverAnimation: true,
          label: {
            normal: {
              formatter: '{b}',
              position: 'left',
              show: false
            }
          },
          itemStyle: {
            normal: {
              color: 'yellow',
              shadowBlur: 10,
              shadowColor: 'yellow'
            }
          },
          zlevel: 1
        }
      ]
    };

    topd.setOption(option)

// 4.柱状图渲染，自动排序
// 柱子 - 销售金额
async function getSalesMoneyData() {
    let res = await axios({ url: 'http://8.138.119.204:8182/api/rank' })
    return res.data
}

async function renderSalesMoneyData() {
    let resdata = await getSalesMoneyData()

    const button =echarts.init(bottom,'dark')

    let index = 7
  
    const datalist = resdata.data.slice(0,index).map(item=>item.value) //[120, 200, 150, 80, 70, 110, 130]
    const xtitles = resdata.data.slice(0,index).map(item=>item.name)
    const  option = {
        tooltip:{

        },
        grid:{
            top:'10%',
            bottom:'10%'
        },
        xAxis: {
            type: 'category',
            data:xtitles //['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            // data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            data:datalist.map((item,index)=>{
                return  {
                    value:item,
                    itemStyle:{
                        color:index<datalist.length-2?'#0094ff':'#ff0000'
                    }
                }
            })
        }],
     
    };
    
    setInterval(function (){
        // var axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');
    
        // // var data0 = option.series[0].data;
        // var data0 = datalist;
        
        
        // // data0.pop();
        // data0.push(Math.round(Math.random() * 1000));
        index++
        if(index>=resdata.data.length){
            index = 0
        }

        const itemdata = resdata.data[index]
        datalist.shift();
        xtitles.shift();

        datalist.push(itemdata.value)
        xtitles.push(itemdata.name)
    
        // option.xAxis.data.shift();
        // option.xAxis.data.push(axisData);
        option.xAxis.data = xtitles
        option.series[0]={
            // data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            data:datalist.map((item,index)=>{
                return  {
                    value:item,
                    itemStyle:{
                        color:index<datalist.length-2?'#0094ff':'#ff0000'
                    }
                }
            })
        }
    
        button.setOption(option);
    }, 2100);

     
     
     button.setOption(option);
}

renderSalesMoneyData()

// 5.热销占比图
async function getData5() {
    let res = await axios({
        url:'http://8.138.119.204:8182/api/commodity'
    })
    return res.data
}

async function  render5() {
    
   let data = await getData5()
    let dataList = data.data

    console.log('数组',dataList);
    

option = {
    title:[
    {
       text:dataList[0].name,
       textStyle:{
         fontSize:14,
         color:'white'
       },
       bottom:'8%',
       left:80,
       
    },
   {
       text:dataList[1].name,
        bottom:'8%',
        textStyle:{
         fontSize:14,
         color:'white'
       },
        left:170
    },
    {
       text:dataList[2].name,
        bottom:'8%',
        textStyle:{
         fontSize:14,
         color:'white'
       },
        left:275
    },
    ],
//   dataset: [
//     {
//       source: [
//         ['Product',
// 'Sales',
// 'Price',
// 'Year'],


        
//         ['Cake', 123, 32, 2011],
//         ['Cereal', 231, 14, 2011],
//         ['Tofu', 235, 5, 2011],
//         ['Dumpling', 341, 25, 2011],
//         ['Biscuit', 122, 29, 2011],
//         ['Cake', 143, 30, 2012],
//         ['Cereal', 201, 19, 2012],
//         ['Tofu', 255, 7, 2012],
//         ['Dumpling', 241, 27, 2012],
//         ['Biscuit', 102, 34, 2012],
//         ['Cake', 153, 28, 2013],
//         ['Cereal', 181, 21, 2013],
//         ['Tofu', 395, 4, 2013],
//         ['Dumpling', 281, 31, 2013],
//         ['Biscuit', 92, 39, 2013],
//         ['Cake', 223, 29, 2014],
//         ['Cereal', 211, 17, 2014],
//         ['Tofu', 345, 3, 2014],
//         ['Dumpling', 211, 35, 2014],
//         ['Biscuit', 72, 24, 2014]
      // ]

  
  series: [
    {
      type: 'pie',
      radius: 50,
      center: ['50%', '25%'],
      datasetIndex: 1,
      data:dataList[0].children.map(item=>{return {name: item.name,value:item.value}})
    },
    {
      type: 'pie',
      radius: 50,
      center: ['50%', '50%'],
      datasetIndex: 2,
      data:dataList[1].children.map(item=>{return {name: item.name,value:item.value}})
    },
    {
      type: 'pie',
      radius: 50,
      center: ['50%', '75%'],
      datasetIndex: 3,
      data:dataList[2].children.map(item=>{return {name: item.name,value:item.value}})
    }
  ],
  // Optional. Only for responsive layout:
  media: [
    {
      query: { minAspectRatio: 1 },
      option: {
        series: [
          { center: ['25%', '50%'] },
          { center: ['50%', '50%'] },
          { center: ['75%', '50%'] }
        ]
      }
    },
    {
      option: {
        series: [
          { center: ['50%', '25%'] },
          { center: ['50%', '50%'] },
          { center: ['50%', '75%'] }
        ]
      }
    }
  ]
};

  myCharts3.setOption(option)

}

// 调用函数
render5()


// 6.库存销量
// 6.1获取数据

async function getData6() {
    let res =await axios({
      url:'http://8.138.119.204:8182/api/stock'
    })
    return res.data
}

async function render6() {
  let res =await getData6()
  console.log('666',res.data);
  

option = {
  series: [
    {
      radius:'50%',
      center:['20%','30%'],
      title:{
       offsetCenter: ["0", "-46%"]
      },
      type: 'gauge',
      axisLine: {
        lineStyle: {
          width: 5,
          color: [
            [0.2, '#91CA8C'],
            [0.8, '#37a2da'],
            [1, '#fd666d']
          ]
        }
      },
      pointer: {
        itemStyle: {
          color: 'red'
        }
      },
      axisTick: {
        distance: -2,
        length: 5,
        lineStyle: {
          color: '#759AA0',
          width: 2
        }
      },
      splitLine: {
        distance: -2,
        length: 10,
        lineStyle: {
          color: '#759AA0',
          width: 4
        }
      },
    
      axisLabel: {
        color: 'inherit',
        distance: 10,
        // fontSize: 10,
        // max:500
        // max:res.data[0].stock,
        
      },
      detail: {
        // valueAnimation: true,
        formatter: '{value}',
        fontSize:15,
        color: 'inherit'
      },
      data: [
        {
          name:res.data[0].name,
          value:res.data[0].sales,
        }
      ],
      max:res.data[0].stock,
    },
    {
      radius:'50%',
      center:['50%','30%'],
      title:{
       offsetCenter: ["0", "-46%"]
      },
      type: 'gauge',
      axisLine: {
        lineStyle: {
          width: 5,
          color: [
            [0.2, '#91CA8C'],
            [0.8, '#37a2da'],
            [1, '#fd666d']
          ]
        }
      },
      pointer: {
        itemStyle: {
          color: 'red'
        }
      },
      axisTick: {
        distance: -2,
        length: 5,
        lineStyle: {
          color: '#759AA0',
          width: 2
        }
      },
      splitLine: {
        distance: -2,
        length: 10,
        lineStyle: {
          color: '#759AA0',
          width: 4
        }
      },
    
      axisLabel: {
        color: 'inherit',
        distance: 10,
        fontSize: 10,
        
      },
      detail: {
        valueAnimation: true,
        formatter: '{value}',
        fontSize:15,
        color: 'inherit'
      },
      data: [
        {
          name:res.data[1].name,
          value: res.data[1].sales,
        }
      ],
     max: res.data[1].stock,
    },
    {
      radius:'50%',
      center:['80%','30%'],
      title:{
       offsetCenter: ["0", "-46%"]
      },
      type: 'gauge',
      axisLine: {
        lineStyle: {
          width: 5,
          color: [
            [0.2, '#91CA8C'],
            [0.8, '#37a2da'],
            [1, '#fd666d']
          ]
        }
      },
      pointer: {
        itemStyle: {
          color: 'red'
        }
      },
      axisTick: {
        distance: -2,
        length: 5,
        lineStyle: {
          color: '#759AA0',
          width: 2
        }
      },
      splitLine: {
        distance: -2,
        length: 10,
        lineStyle: {
          color: '#759AA0',
          width: 4
        }
      },
    
      axisLabel: {
        color: 'inherit',
        distance: 10,
        fontSize: 10,
        
      },
      detail: {
        valueAnimation: true,
        formatter: '{value}',
        fontSize:15,
        color: 'inherit'
      },
      data: [
        {
          name:res.data[2].name,
          value: res.data[2].sales,
        }
      ],
     max: res.data[2].stock,
    },
     {
      radius:'50%',
      center:['35%','72%'],
      title:{
       offsetCenter: ["0", "-46%"]
      },
      type: 'gauge',
      axisLine: {
        lineStyle: {
          width: 5,
          color: [
            [0.2, '#91CA8C'],
            [0.8, '#37a2da'],
            [1, '#fd666d']
          ]
        }
      },
      pointer: {
        itemStyle: {
          color: 'red'
        }
      },
      axisTick: {
        distance: -2,
        length: 5,
        lineStyle: {
          color: '#759AA0',
          width: 2
        }
      },
      splitLine: {
        distance: -2,
        length: 10,
        lineStyle: {
          color: '#759AA0',
          width: 4
        }
      },
    
      axisLabel: {
        color: 'inherit',
        distance: 10,
        fontSize: 10,
        
      },
      detail: {
        valueAnimation: true,
        formatter: '{value}',
        fontSize:15,
        color: 'inherit'
      },
      data: [
        {
          name:res.data[3].name,
          value: res.data[3].sales,
        }
      ],
     max: res.data[3].stock,
    },
    {
      radius:'50%',
       center:['67%','72%'],
      title:{
       offsetCenter: ["0", "-46%"]
      },
      type: 'gauge',
      axisLine: {
        lineStyle: {
          width: 5,
          color: [
            [0.2, '#91CA8C'],
            [0.8, '#37a2da'],
            [1, '#fd666d']
          ]
        }
      },
      pointer: {
        itemStyle: {
          color: 'red'
        }
      },
      axisTick: {
        distance: -2,
        length: 5,
        lineStyle: {
          color: '#759AA0',
          width: 2
        }
      },
      splitLine: {
        distance: -2,
        length: 10,
        lineStyle: {
          color: '#759AA0',
          width: 4
        }
      },
    
      axisLabel: {
        color: 'inherit',
        distance: 10,
        fontSize: 10,
        
      },
      detail: {
        valueAnimation: true,
        formatter: '{value}',
        fontSize:15,
        color: 'inherit'
      },
      data: [
        {
          name:res.data[4].name,
          value: res.data[4].sales,
        }
      ],
     max: res.data[4].stock,
    }
  ]
};
myCharts4.setOption(option)
}
render6()
    </script>
</body>

</html>